<template>
    <div v-loading="loading" style="width: 100%;">
        <SavePage :title="`${form.year}年度预算`">
            <template slot="body">
                <TitleTips title="基本信息" />
                <el-form class="size-auto" :inline="true" size="medium" label-width="86px">
                    <el-row :gutter="24">
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="年度：">
                                <span>{{ form.year }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="归属单位：">
                                <span>{{ form.subordinateUnitsName }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>             
                </el-form>
                <TitleTips title="预算内容" />
                <el-form class="size-auto width-100" :inline="true" size="medium" label-width="130px">
                    <CardBox title="一、征管经费">
                        <template slot="button"><div>合计： <span class="money">￥{{ form.collectionManagementFeeTotal }}</span></div></template>
                        <el-row :gutter="24">
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="征管经费：" prop="collectionManagementFee">
                                    <span>{{ form.collectionManagementFee }} 元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="征费维修维护费：" prop="maintenanceRepairFee">
                                    <span>{{ form.maintenanceRepairFee }} 元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="服务区运营费用：" prop="serviceAreaOperationFee">
                                    <span>{{ form.serviceAreaOperationFee }} 元</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </CardBox>
                    <CardBox title="二、养护经费">
                        <template slot="button"><div>合计： <span class="money">￥{{ form.maintFeeTotal }}</span></div></template>
                        <el-row :gutter="24">
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="运营费用：" prop="operatingFee">
                                    <span>{{ form.operatingFee }} 元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="养护检测费用：" prop="maintenanceInspectionFee">
                                    <span>{{ form.maintenanceInspectionFee }} 元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="日常养护费用：" prop="routineMaintenanceFee">
                                    <span>{{ form.routineMaintenanceFee }} 元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="养护工程费用：" prop="maintenanceEngineeringFee">
                                    <span>{{ form.maintenanceEngineeringFee }} 元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="其他：" prop="otherFee">
                                    <span>{{ form.otherFee }} 元</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </CardBox>
                    <el-row :gutter="24">
                        <el-col :lg="8" :xl="6">
                            <el-form-item label="三、公用经费：" prop="publicFee">
                                <span>{{ form.publicFee }} 元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="8" :xl="6">
                            <el-form-item label="四、人员经费：" prop="personnelFee">
                                <span>{{ form.personnelFee }} 元</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <TitleTips title="预算文件" />
                <FileListPreview style="margin-left: 20px;" :files="form.budgetFile" />
            </template>
        </SavePage>
    </div>
</template>

<script>
import { BudgetingModel } from '@/models'
import FileListPreview from '@/components/FileListPreview'
import BigNumber from 'bignumber.js'

export default {
    name: 'StandingBookAdd',
    components: {
        FileListPreview
    },
    data() {
        return {
            loading: true,
            model: new BudgetingModel(),
            form: {
                year: '',
                subordinateUnitsName: '',
                budgetFile: []
            }
        }
    },
    async created() {
        this.getDetail()
    },
    methods: {
        // 获取编辑时需要的详情数据
        getDetail() {
            this.model.detail({ id: this.$route.query.id }).then(res => {
                this.form = res
                this.form.budgetFile = this.form.budgetFile ? JSON.parse(this.form.budgetFile) : []
            }).finally(() => {
                this.loading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-form--inline.size-auto.width-100 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: calc(100% - 130px);
        }
    }    
}
.margin-b-0 {
    margin-bottom: 0;
}
.add-box {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 24px;
    background: rgb(250, 250, 250);
    border: 1px solid #F5F7FA;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    &:hover {
        background: rgb(240, 240, 240);
    }
    i {
        color: #171725;
        font-style: normal;
    }
}
.money {
    color: #0062ff;
    font-size: 18px;
}
</style>
